<template>
    <div class="content">
        <div class="box" v-if="infor">
            <div class="appTitle">
                卡券购买
            </div> 
            <el-form ref="formInline" label-width="120px" label-position="right" :rules="rules" :model="formInline">
                <el-row :gutter="41" class="row-padding-top"> 
                    <el-col >
                        <el-form-item label="学校：">
                            <span>{{formInline.sSchoolName}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row :gutter="41"> 
                    <el-col >
                        <el-form-item label="商品名称：">
                            <span>{{formInline.sServiceName}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41"> 
                  <el-col>
                        <el-form-item label="当前收费：" class="card-buy">
                             <el-radio-group v-model="formInline.sType"  @change="changeNum">
                                <el-radio :label="item.option" v-for="(item,index) in infor.sNewTimeNum"
                                :key="index">{{item.name}}（{{item.discount}}元）
                                </el-radio>
                            </el-radio-group>
                            <p style="color:#f00">注：以上是显示全额为线上收费选项金额，不代表卡券单价，请选择对应的收费选项来确定卡券面值及价格</p>
                        </el-form-item>
                    </el-col>
                </el-row> 
                <el-row :gutter="41"> 
                   <el-col>
                    <el-form-item label="当前分成比例：">
                    <span>{{!infor.sDividedPercentage ? '00.00' : infor.sDividedPercentage}}%</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="41"> 
                    <el-col>
                        <el-form-item label="数量：" prop="sCardCouponsNum">
                            <el-input v-model="formInline.sCardCouponsNum" 
                            style="width:200px" @change="changeNum" :maxlength="4"></el-input><span>&nbsp; 张</span>                           
                        </el-form-item>     
                    </el-col>
                    <el-col >
                        <el-form-item>
                            <p>注：线下应付款{{formInline.sOrderMoney}}元</p>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41"> 
                    <el-col >
                        <el-form-item label="活动价格：" prop="sShouldPayMoney">
                            <el-input v-model="formInline.sShouldPayMoney" style="width:200px" :maxlength="10"></el-input><span>&nbsp; 元</span>                       
                        </el-form-item>
                    </el-col>
                    <el-col >
                        <el-form-item>
                            <p class="remark-color">注：若您参与了我们某次的活动，可以在此修改您得到的活动优惠价格，并在线下支付时按照此价格支付，仅限活动！</p>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-row :gutter="41"> 
                    <el-col >
                        <el-form-item label="购买说明：" >
                           <p class="remark-color">1.购买卡券需先线上申请开通对应学校收费服务</p>
                           <p class="remark-color">2.卡券单价为线上收费金额乘以橘子股份所得分成比例</p>
                           <p class="remark-color">3.购买申请提交后，需线下付款，待确认收款后发放卡券</p>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-form-item class="footer">
                    <el-button @click="resetForm">取消</el-button>
                    <el-button type="primary" @click="submitForm('formInline')" :loading="loadingBtn">提交申请</el-button>
                </el-form-item> -->
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <div class="footer">
                                <el-button @click="resetForm">取消</el-button>
                                <el-button type="primary" @click="submitForm('formInline')" :loading="loadingBtn">提交申请</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
 import { getCouponPurchaseInfo, saveIncrementCardCoupons } from 'api/cardCoupons';
 export default {
     name: 'cardToBuyList',
     components: {},
     data() {
         var validateShouldPayMoney = (rule, value, callback) => {
             if (parseFloat(value) > parseFloat(this.formInline.sOrderMoney)) {
                 callback(new Error('活动价格不可以大于线下应付款'));
             } else {
                 callback()
             }
         };
         var validateCardCoupons = (rule, value, callback) => {
             if (value > 1000) {
                 callback(new Error('最多购买1000张'));
             } else {
                 callback()
             }
         };

         return {
             formInline: {
                 sSchoolName: '', // 学校名字
                 fSchoolId: '', // 学校id
                 fServiceId: '', // 商品id
                 sServiceName: '', // 商品名字
                 fOrgUserId: '',
                 fOrgUserName: '',
                 sCardCouponsNum: null, // 数量
                 sType: '', // 收费类型
                 sOrderMoney: '', // 线下应付金额
                 timestore: '', // 0.5代表半年，1代表1年
                 sCardMoney: '', // 元（200,400,600）
                 sShouldPayMoney: null// 活动价格
             },
             arrayChangeList: [],
             infor: null,
             payRecord: '',
             rules: {
                 sCardCouponsNum: [
                        {required: true, message: '请输入购买数量', trigger: 'change'},
                        {pattern: /^[1-9]\d*$/, message: '购买数量应为大于0的整数', trigger: 'change,blur'},
                        {validator: validateCardCoupons, trigger: 'change,blur'}
                 ],
                 sShouldPayMoney: [
                        {required: true, message: '请输入活动价格', trigger: 'change'},
                        {pattern: /^(([1-9]\d*)|(([0]\.\d{1,2})|([1-9]\d*\.\d{1,2})))$/, message: '活动价格为最多两位小数的实数', trigger: 'change,blur'}, // 完善保留两位小数的正则 by cuihd 20180123
                        {validator: validateShouldPayMoney, trigger: 'blur'}
                 ]
                    
             },
             loadingBtn: false // 禁用按钮
         }
     },
     created() {
         this.getDetail();// 卡券购买记录详情
     },
     methods: {
         changeNum() {        
             let obj=this.arrayChangeList.find(val => {
                 return val.option==this.formInline.sType
             })
             let index=this.arrayChangeList.indexOf(obj);
             let discount=parseInt(this.arrayChangeList[index].discount);// 多少元
             let sShouldPayMoney = this.formInline.sCardCouponsNum * discount * (100-this.infor.sDividedPercentage)*0.01;
             let sOrderMoney = this.formInline.sCardCouponsNum * discount * (100-this.infor.sDividedPercentage)*0.01
             this.formInline.sShouldPayMoney= sShouldPayMoney.toFixed(2);// 活动价格
             this.formInline.sOrderMoney= sOrderMoney.toFixed(2);// 线下应付金额
            //  this.formInline.sShouldPayMoney=this.formInline.sShouldPayMoney;
            //  this.formInline.sOrderMoney=this.formInline.sOrderMoney;
         },
        //  回填
         getDetail() {
             let schoolId=this.$route.params.schoolId;
             let serviceId=this.$route.params.serviceId;
             getCouponPurchaseInfo(schoolId, serviceId).then(res => {
                 res.data.content.payRecord.sNewTimeNum =JSON.parse(res.data.content.payRecord.sNewTimeNum);// json转数组
                 this.arrayChangeList=res.data.content.payRecord.sNewTimeNum;
                 console.log(this.arrayChangeList);
                 this.formInline.sType=this.arrayChangeList[0].option;
                 this.infor = res.data.content.payRecord;
                 this.formInline.sSchoolName=this.infor.sSchoolName;// 学校名字
                 this.formInline.sServiceName=this.infor.sServiceName;// 学校名字
             })
         },
         // 返回上一页
         resetForm() {
             this.$router.go(-1);
         },
        //  购买
         submitForm(formName) {
             this.$refs[formName].validate((valid) => {
                 if (valid) {
                     this.loadingBtn = true;                      
                     let sSchoolName= this.formInline.sSchoolName;// 学校名字
                     let fSchoolId= this.$route.params.schoolId;// 学校id
                     let fServiceId= this.$route.params.serviceId;// 商品id
                     let sServiceName= this.formInline.sServiceName;// 商品名字
                     let sCardCouponsNum= this.formInline.sCardCouponsNum;// 数量
                     console.log(this.arrayChangeList);
                     let obj = this.arrayChangeList.find(val => {
                         return val.option == this.formInline.sType
                     })
                     let index=this.arrayChangeList.indexOf(obj);
                     let sType= '';// 收费类型
                     let sOrderMoney= this.formInline.sOrderMoney;// 线下应付金额
                     let sCardMoney= +this.arrayChangeList[index].discount;// 多少元
                     let timestore= +this.arrayChangeList[index].option;// 选择的卡券对应时间
                     if (timestore == 0) {
                         this.$message('卡券对应时间不正确!');
                         this.loadingBtn = false;
                         return false;
                     }
                     let sShouldPayMoney= this.formInline.sShouldPayMoney;// 活动价格
                     
                     saveIncrementCardCoupons(
                            sSchoolName,
                            fSchoolId,
                            fServiceId,
                            sServiceName,
                            sCardCouponsNum,
                            sType,
                            sOrderMoney,
                            timestore,
                            sCardMoney,
                            sShouldPayMoney
                    ).then(res => {
                        this.loadingBtn = false;
                        this.$message.success('成功提交卡券购买申请！');
                        this.$router.push({path: '/cardCoupons'})
                    }).catch(() => {
                        this.loadingBtn = false;
                    })
                 } else {
                     return false;
                 }
             });
         }
     }
 }
</script>

<style lang="scss" scoped>
.content {
    padding:0 50px;
    background: #fff;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    .form-label-padding {
        padding-left: 16px;
    }
    .box {
        padding-bottom: 10px;
        background: #fff;
        .appTitle {
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
            border-bottom: 1px solid #ddd;
        }
        .row-padding-top{
            padding-top:30px;
        }
        .remark-color{
            font-size:14px;
            color:#999;
        }
        .form-date {
            padding: 14px 0 35px 16px;
            font-size: 14px;
            color: #333;
        }
        .footer {
            text-align: center;
            margin: 80px 0 40px 0;
            // .el-button { 2018-01-11 by cuihd
            //     padding: 10px 40px;
            // }
        }
    }
}
</style>